﻿<Controls:UserControl x:Class="MyMediaStuff.UI.Controls.PicturesView"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:Controls="clr-namespace:Catel.Windows.Controls;assembly=Catel.Windows"
                      xmlns:ViewModels="clr-namespace:MyMediaStuff.UI.ViewModels"
                      xmlns:LocalControls="clr-namespace:MyMediaStuff.UI.Controls"
                      xmlns:Converters="clr-namespace:Catel.Windows.Data.Converters;assembly=Catel.Windows"
                      xmlns:Windows="clr-namespace:Catel.Windows;assembly=Catel.Windows"
                      x:TypeArguments="ViewModels:PicturesViewModel"
                      Windows:Designer.ViewModel="{x:Type ViewModels:DesignPicturesViewModel}">
    <UserControl.Resources>
        <Converters:BooleanToCollapsingVisibilityConverter x:Key="BooleanToCollapsingVisibilityConverter" />
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="350" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.ColumnSpan="2">
            <TextBlock Text="{Binding Title}" Style="{StaticResource CaptionTextBlockStyle}" />
        </Label>

        <Label Grid.Row="1" Content="{Binding Pictures.Count}" ContentStringFormat="Found {0} pictures" />

        <!-- Right panel -->
        <StackPanel Grid.Row="2" Grid.RowSpan="2" Grid.Column="1">
            <GroupBox Header="Toolbox">
                <StackPanel Orientation="Vertical">

                    <!-- Buttons -->
                    <StackPanel Orientation="Horizontal">
                        <Button Command="{Binding PlaySlideshow}" ToolTip="Start slideshow" Style="{StaticResource ImageButtonStyle}"
                            Visibility="{Binding IsPlayingSlideshow, Converter={StaticResource BooleanToCollapsingVisibilityConverter}, ConverterParameter=False}">
                            <Image Source="/Resources/Images/Play.png" Margin="4" />
                        </Button>

                        <Button Command="{Binding StopSlideshow}" ToolTip="Stop slideshow" Style="{StaticResource ImageButtonStyle}"
                            Visibility="{Binding IsPlayingSlideshow, Converter={StaticResource BooleanToCollapsingVisibilityConverter}, ConverterParameter=True}">
                            <Image Source="/Resources/Images/Stop.png" Margin="4" />
                        </Button>

                        <Button Command="{Binding Refresh}" ToolTip="Refresh" Style="{StaticResource ImageButtonStyle}">
                            <Image Source="/Resources/Images/Refresh.png" Margin="4" />
                        </Button>

                        <Button Command="{Binding ViewInSoftware}" ToolTip="View in default software" Style="{StaticResource ImageButtonStyle}">
                            <Image Source="/Resources/Images/ViewInSoftware.png" Margin="4" />
                        </Button>
                    </StackPanel>

                    <!-- Preview size slider -->
                    <Controls:StackGrid>
                        <Controls:StackGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Controls:StackGrid.ColumnDefinitions>

                        <Label Content="Preview size:" />
                        <Slider x:Name="previewSizeSlider" Minimum="150" Maximum="300" Value="200" IsSnapToTickEnabled="True"
                                TickFrequency="10" Width="200" />                        
                    </Controls:StackGrid>
                    
                </StackPanel>
            </GroupBox>

            <LocalControls:NerdInfo />
        </StackPanel>

        <!-- List of items -->
        <GroupBox Grid.Row="2" Header="Available pictures">
            <ListBox ItemsSource="{Binding Pictures}" SelectedItem="{Binding SelectedPicture}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                <!-- Template definition required for the ExpressionDark theme -->
                <ListBox.Template>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Grid>
                            <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{DynamicResource ControlBackgroundBrush}" />
                            <ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}" Focusable="false" Background="{x:Null}">
                                <WrapPanel Orientation="Horizontal" Margin="1,1,1,1" IsItemsHost="true" />
                            </ScrollViewer>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border" />
                                <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border" />
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ListBox.Template>

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding FileName}" Width="{Binding ElementName=previewSizeSlider, Path=Value}" 
                               Height="{Binding ElementName=previewSizeSlider, Path=Value}" HorizontalAlignment="Center" 
                               VerticalAlignment="Center" Stretch="Uniform" Margin="6">
                            <Image.BitmapEffect>
                                <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="25" Softness="1" Opacity="0.5"/>
                            </Image.BitmapEffect>
                        </Image>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </GroupBox>

        <!-- Preview -->
        <GroupBox Grid.Row="3" Header="Selected picture">
            <Image Source="{Binding SelectedPicture.FileName}" HorizontalAlignment="Center" 
                   VerticalAlignment="Center" Stretch="Uniform" Margin="6" />
        </GroupBox>
    </Grid>
</Controls:UserControl>
